<!-- 
Echart 图实现节点可折叠，单击事件触发

作者：Mason
版本：V0.1
时间：2017年7月5日10:07:54            
 -->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>Test4</title>
	</head>

	<body>
		<div id="main" style="width: 850px; height: 500px"></div>
		<div id="ss"></div>
		<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
		<script type="text/javascript">
			require.config({
				paths: {
					echarts: 'http://echarts.baidu.com/build/dist'
				}
			});
			require(["echarts", "echarts/chart/force"], function(ec) {
				var myChart = ec.init(document.getElementById('main'), 'macarons');
				var option = {
					tooltip: {
						show: false
					},
					series: [{
						type: 'force',
						name: "Force tree",
						itemStyle: {
							normal: {
								label: {
									show: true
								},
								nodeStyle: {
									brushType: 'both',
									borderColor: 'rgba(255,215,0,0.4)',
									borderWidth: 1
								}
							}
						},
						categories: [{
							name: '学校'
						}, {
							name: '校区'
						}, {
							name: '学院'
						}, {
							name: '班级'
						}],
						nodes: [{
								id: 0,
								category: 0,
								name: '0',
								label: '本人',
								symbolSize: 40,
								ignore: false,
								flag: true
							},
							{
								id: 1,
								category: 1,
								name: '1',
								label: '手机号',
								symbolSize: 20,
								ignore: true,
								flag: true
							},
							{
								id: 2,
								category: 2,
								name: '2',
								label: '恋人',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 3,
								category: 2,
								name: '3',
								label: '朋友',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 4,
								category: 1,
								name: '4',
								label: '地址',
								symbolSize: 20,
								ignore: true,
								flag: true
							},
							{
								id: 5,
								category: 2,
								name: '5',
								label: '父亲',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 6,
								category: 2,
								name: '6',
								label: '母亲',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 7,
								category: 2,
								name: '7',
								label: '恋人',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 8,
								category: 1,
								name: '8',
								label: '邮箱',
								symbolSize: 20,
								ignore: true,
								flag: true
							},
							{
								id: 9,
								category: 2,
								name: '9',
								label: '同事',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 10,
								category: 2,
								name: '10',
								label: '上司',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 11,
								category: 2,
								name: '11',
								label: '小弟',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 12,
								category: 2,
								name: '12',
								label: '大哥',
								symbolSize: 40,
								ignore: true,
								flag: true
							},
							{
								id: 13,
								category: 3,
								name: '13',
								label: 'QQ',
								number: 45,
								techear: '张三',
								symbolSize: 20,
								ignore: true,
								flag: true
							},
							{
								id: 14,
								category: 3,
								name: '14',
								label: '微信',
								number: 52,
								techear: '李四',
								symbolSize: 20,
								ignore: true,
								flag: true
							}
						],
						links: [{
								source: 1,
								target: 0,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, // 根据数量动态调整 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 4,
								target: 0,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 8,
								target: 0,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							},
							{
								source: 2,
								target: 1,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 3,
								target: 1,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 5,
								target: 4,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							},
							{
								source: 6,
								target: 4,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 7,
								target: 4,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 9,
								target: 8,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							},
							{
								source: 10,
								target: 8,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 11,
								target: 8,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 12,
								target: 8,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							},
							{
								source: 13,
								target: 6,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}, {
								source: 14,
								target: 6,
								itemStyle: {
									normal: {
										brushType: 'stroke',
										lineWidth: 2, 
										shadowColor: '#333333',
										text: "这里是权值",
										textPosition: 'inside',
										color: 'blue', // 文字颜色 
										textFont: 'normal 12px 宋体',
										strokeColor: 'yellow'
									}
								}
							}
						]
					}]
				};
				myChart.setOption(option);
				var ecConfig = require('echarts/config');

				function openOrFold(param) {
					var option = myChart.getOption();
					var nodesOption = option.series[0].nodes;
					var linksOption = option.series[0].links;
					var data = param.data;
					var linksNodes = [];

					var categoryLength = option.series[0].categories.length;

					if(data.category == (categoryLength - 1)) {
						alert(data.label);
					}

					if(data != null && data != undefined) {
						if(data.flag) {

							for(var m in linksOption) {

								if(linksOption[m].target == data.id) {
									linksNodes.push(linksOption[m].source);
								}
							}
							if(linksNodes != null && linksNodes != undefined) {
								for(var p in linksNodes) {
									nodesOption[linksNodes[p]].ignore = false; //当前节点设为显示
									nodesOption[linksNodes[p]].flag = true;
								}
							}
							nodesOption[data.id].flag = false;
							myChart.setOption(option);
						} else {

							for(var m in linksOption) {

								if(linksOption[m].target == data.id) {
									linksNodes.push(linksOption[m].source);
								}
								if(linksNodes != null && linksNodes != undefined) {
									for(var n in linksNodes) {
										if(linksOption[m].target == linksNodes[n]) {
											linksNodes.push(linksOption[m].source);
										}
									}
								}
							}
							if(linksNodes != null && linksNodes != undefined) {
								for(var p in linksNodes) {
									nodesOption[linksNodes[p]].ignore = true; //当前节点设为折叠
									nodesOption[linksNodes[p]].flag = true;
								}
							}
							nodesOption[data.id].flag = true;
							myChart.setOption(option);
						}
					}
				}
				myChart.on(ecConfig.EVENT.CLICK, openOrFold);
			});
		</script>

	</body>

</html>